import React from 'react';
import { Box, Alert, CircularProgress } from '@mui/material';
import InfoSection from './InfoSection';
import InfoItem from './InfoItem';
import { KeyInfo, GraduationInfo } from '../types';

interface KeyInfoSectionProps {
    keyInfo: KeyInfo | null;
    graduationInfo: GraduationInfo | null;
    onEdit: () => void;
    onEditGraduation: () => void;
    loading?: boolean;
    error?: string | null;
    graduationLoading?: boolean;
    graduationError?: string | null;
}

const KeyInfoSection: React.FC<KeyInfoSectionProps> = ({
    keyInfo,
    graduationInfo,
    onEdit,
    onEditGraduation,
    loading,
    error,
    graduationLoading,
    graduationError
}) => {
    // 合并loading状态
    const isLoading = loading || graduationLoading;
    // 合并error状态
    const combinedError = error || graduationError;

    return (
        <InfoSection title="关键信息" onEdit={onEdit} loading={isLoading}>
            {combinedError && (
                <Alert severity="error" sx={{ mb: 2 }}>
                    {combinedError}
                </Alert>
            )}

            {isLoading ? (
                <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
                    <CircularProgress />
                </Box>
            ) : (
                <>
                    {/* 关键信息部分 */}
                    {keyInfo ? (
                        <Box className="form-grid">
                            <InfoItem label="特需生" value={keyInfo.specialAttention} />
                            <InfoItem label="困难类型" value={keyInfo.difficultyType} />
                            <InfoItem label="跨部门支持" value={keyInfo.supportNeed} />
                            <InfoItem label="支持内容" value={keyInfo.supportInfo} />
                            <InfoItem label="联系家长" value={keyInfo.parentsContacted} />
                        </Box>
                    ) : (
                        <Box sx={{ textAlign: 'center', p: 3 }}>暂无关键信息</Box>
                    )}

                    {/* 毕业信息部分 */}
                    {graduationInfo && (
                        <Box className="form-grid" sx={{ mt: 3, pt: 3, borderTop: '1px dashed #e0e0e0' }}>
                            <InfoItem label="省厅系统填报" value={graduationInfo.provinceSystemReport} />
                            <InfoItem label="毕业生登记表填报" value={graduationInfo.graduateRegisteReport} />
                        </Box>
                    )}
                </>
            )}
        </InfoSection>
    );
};

export default KeyInfoSection;
